window.addEventListener('load',function(){
    let id  = location.search.split('=')[1];

    // 歌曲分页
    let page = location.hash.replace('#!fenye=', '') || 1;
    let pageSize = 20;
    let totals = 0;

    // 专辑分页
    let pageZj = location.hash.replace('#!fenye=', '') || 1;
    let pageSizeZj = 20;
    let totalsZj = 0;

    // Mv分页
    let pageMv = location.hash.replace('#!fenye=', '') || 1;
    let pageSizeMv = 20;
    let totalsMv = 0;
    fetch(`http://39.96.88.57:9090/api/www/artist/artist?artistid=${id}&httpsStatus=1&reqId=590e8640-ddfa-11ed-a0b3-5f55d54526e2`).then(res=>res.json()).then(res=>{
    sigerInfo.innerHTML+=`
     <div class="s_imgout">
                    <img src="${res.data.pic}" alt="" lazy="loaded">
                </div>
                <div class="info">
                    <!-- <h1>周杰伦</h1> -->
                    <div class="name_out flex">
                        <span class="name">${res.data.name}</span>
                    </div>
                    <div class="info_items">
                        <span>单曲:
                            <span class="num">${res.data.musicNum}</span>
                        </span>
                        <span>专辑:
                            <span class="num">${res.data.albumNum}</span>
                        </span>
                        <span>MV:
                            <span class="num">${res.data.mvNum}</span>
                        </span>
                        <span>粉丝:
                            <span class="num">${res.data.artistFans>10000?(res.data.artistFans/10000).toFixed(1)+'W':res.data.artistFans}</span>
                        </span>
                    </div>
                    <div class="singer_items flex">
                        <p>
                            <span>英文名:
                                <span>${res.data.aartist?res.data.aartist:'-'}</span>
                            </span>
                            <span>国籍:
                                <span>${res.data.country?res.data.country:'-'}</span>
                            </span>
                            <span>出生地:
                                <span>${res.data.birthplace?res.data.birthplace:'-'}</span>
                            </span>
                            <span>星座:
                                <span>${res.data.constellation?res.data.constellation+'...':'-'}</span>
                            </span>
                            <span class="all">全部 ></span>
                        </p>
                    </div>
                    <div class="btns">
                        <button class="play">
                            <i class="iconPlay ic1"></i>
                            播放全部歌曲
                        </button>
                        <button>
                            <i class="iconPlay ic2"></i>
                            收藏
                        </button>
                        <button>
                            <i class="iconPlay ic3"></i>
                            使用客户端查看歌手
                        </button>
                    </div>
                </div>
    `
   
    })

    singerDeta();
    // 歌曲分页调用
    render();
    // // 专辑分页调用
    // renderZj();

    // tab栏切换
    $('.tabs li span').click(function(){
       $(this).addClass('active').siblings().removeClass('active')
    })

    // 单个点击切换
    let spans = document.querySelectorAll('.tabs  span');
    spans[0].addEventListener('click',function(){
    list.innerHTML='';
    mvListItem.innerHTML='';
    introView.innerHTML='';
    pagingTestZj.innerHTML='';
    pagingTestMv.innerHTML='';
    $('.child_view').show();
    singerDeta();
    render();
   
 })

    spans[1].addEventListener('click',function(){
    singerList.innerHTML='';
    mvListItem.innerHTML='';
    introView.innerHTML='';
    pagingTest.innerHTML='';
    pagingTestMv.innerHTML='';
    pagingTestZj.innerHTML='';
    $('.child_view').hide();
    zhuanji();
    renderZj();
 })

    spans[2].addEventListener('click',function(){
    singerList.innerHTML='';
    list.innerHTML='';
    introView.innerHTML='';
    pagingTest.innerHTML='';
    pagingTestZj.innerHTML='';
    $('.child_view').hide();
    mv();
    renderMv();
 })

    spans[3].addEventListener('click',function(){
    singerList.innerHTML='';
    list.innerHTML='';
    mvListItem.innerHTML='';
    pagingTest.innerHTML='';
    pagingTestZj.innerHTML='';
    pagingTestMv.innerHTML='';
    $('.child_view').hide();
    intro();
 })


// 歌曲
 function singerDeta(){
     fetch(`http://39.96.88.57:9090/api/www/artist/artistMusic?artistid=${id}&pn=${page}&rn=${pageSize}&httpsStatus=1&reqId=6cbebcd0-ddfc-11ed-a959-c3349a9bb622`).then(res=>res.json()).then(res=>{
     totals=res.data.total;
     singerList.innerHTML='';

     res.data.list.forEach((item,index) => {
            singerList.innerHTML+=`
              <li class="song_item flex">
                            <div class="song_rank flex">
                                <div class="rank_num">
                                    <span class="playing">
                                        <span class="side1 pause"></span>
                                        <span class="side2 pause"></span>
                                        <span class="side3 pause"></span>
                                    </span>
                                    <span>${page==1?index+1:page*pageSize+index+1-20}</span>
                                </div>
                                <img src="${item.pic}" alt=""
                                    lazy="loaded" class="cover">
                            </div>
                            <div class="song_name flex">
                                <a href="./lyrics.html?id=${item.rid}" title="${item.name}" class="name">${item.name}</a>
                                <i class="type">无损</i>
                                <i class="has_mv">MV</i>
                            </div>
                            <div class="song_album">
                               <a href="./album.html?id=${item.albumid}"><span title="${item.album}">${item.album}</span></a>
                            </div>
                            <div class="song_opts flex">
                                <i></i>
                                <i></i>
                                <i></i>
                                <i></i>
                            </div>
                            <div class="song_time">
                                <span>${item.songTimeMinutes}</span>
                            </div>

                        </li>
            `
        });
        render()
    })

   }

// 专辑
  function zhuanji(){
       fetch(`http://39.96.88.57:9090/api/www/artist/artistAlbum?artistid=${id}&pn=${page}&rn=${pageSize}&httpsStatus=1&reqId=9bae8420-de57-11ed-bc22-95d865a2ce84`).then(res=>res.json()).then(res=>{
    totalsZj=res.data.total;
     list.innerHTML=''
          res.data.albumList.forEach(item => {
                 list.innerHTML+=`
                  <li>
                        <a href="./album.html?id=${item.albumid}">
                        <div class="list-bg">
                            <img src="${item.pic}"
                                alt="">
                            <div class="covers">
                                <span class="play">
                                    <i class="play-icon"></i>
                                </span>
                            </div>
                        </div>
                        <p class="name" title="${item.album}">${item.album}</p>
                        
                        </a>
                        
                        <p class="time">${item.releaseDate}</p>
                    
                    </li>
                 `   
          });
          renderZj();
      })
  }

//  MV
function mv(){
     fetch(`http://39.96.88.57:9090/api/www/artist/artistMv?artistid=${id}&pn=${page}&rn=${pageSize}&httpsStatus=1&reqId=348e98d0-de6f-11ed-a0a7-1b12405ef935`).then(res=>res.json()).then(res=>{
    totalsMv=res.data.total;
     mvListItem.innerHTML='';
        console.log();
  
        res.data.mvlist.forEach(item => {
              if(item.pic){
        mvListItem.innerHTML+=`
          <li class="mv_item">
                        <div class="mv_bg">
                            <img src="${item.pic}" alt="">
                            <!-- 遮罩层 -->
                            <div class="coverMsk">
                                <div class="play">
                                    <i class="play-icon"></i>
                                </div>
                            </div>
                            <p class="play_cnt">
                                <span>
                                    <i class="iconFont"></i>
                                    ${item.mvPlayCnt>10000?(item.mvPlayCnt/10000).toFixed(1)+'万':item.mvPlayCnt}
                                </span>
                                <span>${item.songTimeMinutes}</span>
                            </p>
                        </div>
                        <p class="name" title="${item.name}">${item.name}</p>
                        <p class="singer">${item.artist}</p>
                    </li>
     `
    }else{
        pagingZj.innerHTML=''
        pagingMv.innerHTML=''
    }
  });
    
    
 renderMv();
})
}

// 简介

function intro(){
 fetch(`http://39.96.88.57:9090/api/www/artist/artist?artistid=${id}&httpsStatus=1&reqId=590e8640-ddfa-11ed-a0b3-5f55d54526e2`).then(res=>res.json()).then(res=>{
         introView.innerHTML='';
        introView.innerHTML+=`
              <p class="tit">基本信息</p>
                    <div id="intrInfo">
                    </div>
                    <p class="tit">个人简介</p>
                    <p class="text-Info" id="TextInfo">

                    </p>
        
        `;
         intrInfo.innerHTML+=`
                        <div class="info_list flex">
                            <div class="item_l">
                                <span>姓名:
                                    <span class="text">${res.data.name}</span>
                                </span>
                            </div>
                            <div class="item_r">
                                <span>英文名:
                                    <span class="text">${res.data.aartist?res.data.aartist:'-'}</span>
                                </span>
                            </div>
                        </div>
                        <div class="info_list flex">
                            <div class="item_l">
                                <span>性别:
                                    <span class="text">${res.data.gener?res.data.gener:'-'}</span>
                                </span>
                            </div>
                            <div class="item_r">
                                <span>国籍:
                                    <span class="text">${res.data.country?res.data.country:'-'}</span>
                                </span>
                            </div>
                        </div>
                        <div class="info_list flex">
                            <div class="item_l">
                                <span>出生地:
                                    <span class="text">${res.data.birthplace?res.data.birthplace:'-'}</span>
                                </span>
                            </div>
                            <div class="item_r">
                                <span>语言:
                                    <span class="text">${res.data.language?res.data.language:'-'}</span>
                                </span>
                            </div>
                        </div>
                        <div class="info_list flex">
                            <div class="item_l">
                                <span>生日:
                                    <span class="text">${res.data.birthday?res.data.birthday:'-'}</span>
                                </span>
                            </div>
                            <div class="item_r">
                                <span>星座:
                                    <span class="text">${res.data.constellation?res.data.constellation:'-'}</span>
                                </span>
                            </div>
                        </div>
                        <div class="info_list flex">
                            <div class="item_l">
                                <span>身高:
                                    <span class="text">${res.data.tall?res.data.tall:'-'}</span>
                                </span>
                            </div>
                            <div class="item_r">
                                <span>体重:
                                    <span class="text">${res.data.weight?res.data.weight:'-'}</span>
                                </span>
                            </div>
                        </div>
             `
         TextInfo.innerHTML+=`
            ${res.data.info}
            `
})


}
        
     // 歌曲分页      
        function render() {
            layui.use('laypage', function () {
                let laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem:'pagingTest' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: totals, //数据总数，从服务端得到
                    limit: pageSize,
                    prev: "<",
                    next: ">",
                    groups: 3,
                    hash: 'fenye',
                    curr: location.hash.replace('#!fenye=', ''),
                    layout: ["prev", "page", "next"],
                    theme: '#ffdf1f',
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            page = obj.curr;
                            pageSize = obj.limit;
                            singerDeta();
                        }
                    }
                });
            });


        }

     // 专辑分页      
        function renderZj() {
            layui.use('laypage', function () {
                let laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem:'pagingTest' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: totalsZj, //数据总数，从服务端得到
                    limit: pageSize,
                    prev: "<",
                    next: ">",
                    groups: 3,
                    hash: 'fenye',
                    curr: location.hash.replace('#!fenye=', ''),
                    layout: ["prev", "page", "next"],
                    theme: '#ffdf1f',
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            page = obj.curr;
                            pageSize = obj.limit;
                            zhuanji();
                        }
                    }
                });
            });
        }

     // mv分页
        function renderMv() {
            layui.use('laypage', function () {
                let laypageZj = layui.laypage;
                //执行一个laypage实例
                laypageZj.render({
                    elem:'pagingTestZj' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: totalsMv, //数据总数，从服务端得到
                    limit: pageSize,
                    prev: "<",
                    next: ">",
                    groups: 3,
                    hash: 'fenye',
                    curr: location.hash.replace('#!fenye=', ''),
                    layout: ["prev", "page", "next"],
                    theme: '#ffdf1f',
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            page = obj.curr;
                            pageSize = obj.limit;
                            mv();
                        }
                    }
                });
            });


        }



// 下载弹窗
let downAs = document.querySelectorAll('.down-a');
downAs[0].addEventListener('click',function(){
     $('.s1').show().siblings().hide();
     $('.Model').toggle();
    $('.btns a').text('下载安装包');

})
downAs[1].addEventListener('click',function(){
    $('.s1').hide().siblings().show();
    $('.Model').toggle();
    $('.btns a').text('去Appstore下载');
})

$('.icon-Down').click(function(){
    $('.Model').hide();
})



})